<template>
	<view class="container">
		<!-- 主要内容区域 -->
		<view class="main-content" :style="{ paddingBottom: drawerHeight + 'px' }">
			<!-- 手写练习图片轮播 -->
			<view v-show="canAct" class="image-container">
				<swiper class="swiper" style="height: 1200rpx;" circular :indicator-dots="true" :autoplay="false"
					:interval="3000" :duration="300" @change="onSwiperChange">
					<swiper-item v-for="(item, index) in swiperData" :key="index">
						<canvastest-swiper :list="item.list" :imgurl="item.imgurl" :swiperIndex="index"
							@updateList="handleUpdateList"></canvastest-swiper>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 抽屉组件 -->
		<view class="drawer-container" :class="{ 'drawer-expanded': isDrawerExpanded }"
			:style="{ height: drawerHeight + 'px' }">
			<!-- 抽屉头部拖拽区域 -->
			<view class="drawer-header" @click="zhankaiSHouqi" @touchstart="onDrawerTouchStart"
				@touchmove="onDrawerTouchMove" @touchend="onDrawerTouchEnd">
				<view class="drag-indicator"></view>
				<!-- 第二个箭头指示 -->
				<!-- 	<view class="arrow-indicator arrow-2">
					<text class="arrow-text">⬆️</text>
				</view> -->
			</view>

			<!-- 抽屉内容区域 -->
			<scroll-view class="drawer-content" scroll-y="true" :style="{ height: (drawerHeight - 60) + 'px' }">
				<view class="content-wrapper">
					<!-- tab栏 -->
					<view class="tab-container">
						<view class="tab-bar">
							<view class="tab-item" :class="{ 'tab-active': activeTab === 'correction' }"
								@tap="switchTab('correction')">
								<text class="tab-text">批改结果</text>
							</view>
							<view class="tab-item" :class="{ 'tab-active': activeTab === 'comment' }"
								@tap="switchTab('comment')">
								<text class="tab-text">教师评语</text>
							</view>
						</view>
					</view>

					<!-- 批改结果内容 -->
					<view v-show="activeTab === 'correction'" class="tab-content">
						<!-- 听写结果标题 -->
						<view class="result-title">
							<text class="title-text">作文批改结果 (第{{currentSwiperIndex + 1}}页)</text>
						</view>

						<!-- 统计信息 -->
						<view class="stats-section">
							<view class="stat-item">
								<view class="stat-icon correct-icon">
									<text class="icon-text">✓</text>
								</view>
								<text class="stat-label">优美句子:</text>
								<text class="stat-value">{{ currentStats.correct}}</text>
							</view>

							<view class="stat-item">
								<view class="stat-icon wrong-icon">
									<text class="icon-text">✗</text>
								</view>
								<text class="stat-label">错别字:</text>
								<text class="stat-value">{{ currentStats.incorrect }}</text>
							</view>

							<view class="stat-item">
								<view class="stat-icon missing-icon">
									<text class="icon-text">○</text>
								</view>
								<text class="stat-label">其他问题:</text>
								<text class="stat-value">{{ currentStats.missing }}</text>
							</view>
						</view>

						<!-- 学生信息 -->
						<view class="student-info">
							<view class="student-details">
								<text class="student-name">{{ studentInfo.name }}</text>
								<text class="student-class">{{ studentInfo.class }}</text>
							</view>
							<text class="date-info">{{ studentInfo.date }}</text>
						</view>

						<!-- 详细错误列表 (演示更多内容) -->
						<view class="error-details">
							<view class="section-title">错误详情</view>
							<view v-for="(error, index) in errorList" :key="index" class="error-item">
								<view class="error-char">{{ error.character }}</view>
								<view class="error-desc">{{ error.description }}</view>
							</view>
						</view>

						<!-- 建议改进 -->
						<view class="suggestions">
							<view class="section-title">改进建议</view>
							<view v-for="(suggestion, index) in suggestions" :key="index" class="suggestion-item">
								<text class="suggestion-text">{{ suggestion }}</text>
							</view>
						</view>
					</view>

					<!-- 教师评语内容 -->
					<view v-show="activeTab === 'comment'" class="tab-content">
						<!-- 评语标题 -->
						<view class="result-title">
							<text class="title-text">教师评语 (第{{currentSwiperIndex + 1}}页)</text>
						</view>

						<!-- 教师评语输入框 -->
						<view class="teacher-comments">
							<view class="comment-content">
								<textarea class="comment-textarea" v-model="teacherComment" placeholder="请输入教师评语..."
									:maxlength="500"></textarea>
								<view class="comment-counter">{{ teacherComment.length }}/500</view>
							</view>
						</view>
					</view>


				</view>
			</scroll-view>
		</view>
		<view class="btns f f-a-c f-j-b">
			<view class="ban">
				{{ studentInfo.name || '测试学生' }} {{ studentInfo.class || '测试班级' }}<br>
				{{ studentInfo.date || '202323423' }}
			</view>
			<view @click="goCorr" class="shen f f-a-c f-j-c">
				审阅
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-if="isDrawerExpanded" class="drawer-mask" @tap="collapseDrawer"></view>
	</view>
</template>

<script>
	import canvastestSwiper from '@/components/canvastest-swiper.vue'
	import {
		filterErrorCharsByCanvas,
		calculateCanvasStats,
		getImageUrls
	} from '@/utils/correctionResults.js'
	import {
		processZuowenData
	} from '@/utils/zuowenCorrectUtils.js'

	export default {
		components: {
			'canvastest-swiper': canvastestSwiper
		},
		data() {
			return {
				canAct: true,
				// 当前显示的轮播索引
				currentSwiperIndex: 0,
				// 轮播数据，使用真实的批改数据
				swiperData: [],

				// 抽屉状态
				isDrawerExpanded: false,
				drawerHeight: 190, // 初始抽屉高度
				minDrawerHeight: 190,
				maxDrawerHeight: 600,

				// 触摸相关
				touchStartY: 0,
				initialDrawerHeight: 0,

				// 学生数据
				results: {
					correct: 10,
					wrong: 10,
					missing: 10
				},

				studentInfo: {
					name: '小明',
					class: '3年2班',
					date: '20232423'
				},

				// 错误详情列表
				errorList: [],

				// 改进建议
				suggestions: [
					'加强基本笔画练习，特别是横、竖、撇、捺的书写',
					'注意字体结构的平衡，左右结构字要注意比例',
					'提高书写速度的同时保持字迹工整',
					'多练习常用偏旁部首的标准写法'
				],

				// 接收的导航数据
				navigationData: null,
				correctionData: null,

				// 完整的原始数据（用于回传）
				originalData: null,

				// 新增的评语相关数据
				activeTab: 'correction',
				teacherComment: ''
			}
		},
		computed: {
			// 当前页面的统计信息
			currentStats() {
				if (this.swiperData[this.currentSwiperIndex]) {
					return this.swiperData[this.currentSwiperIndex].stats
				}
				return {
					correct: 0,
					incorrect: 0,
					missing: 0
				}
			}
		},
		watch: {
			isDrawerExpanded(newl, oldl) {
				if (newl) {
					this.canAct = false
				} else {
					setTimeout(() => {
						this.canAct = true
					}, 300)
				}
			}
		},
		onLoad(options) {
			console.log('页面加载参数:', options);

			// 接收从compositionList传递的数据
			if (options.data) {
				try {
					this.navigationData = JSON.parse(decodeURIComponent(options.data));
					console.log('接收到的导航数据:', this.navigationData);

					// 检查数据完整性
					if (!this.navigationData.correctionData || !this.navigationData.correctionData.aiCorrectResult) {
						console.error('缺少必要的批改数据');
						throw new Error('缺少必要的批改数据');
					}

					// 临时测试：检查传递的数据格式
					console.log('==== 数据格式检查 ====');
					console.log('aiCorrectResult类型:', typeof this.navigationData.correctionData.aiCorrectResult);
					console.log('aiCorrectResult前100字符:',
						this.navigationData.correctionData.aiCorrectResult.substring(0, 100));

					this.initializeDataFromNavigation();
				} catch (error) {
					console.error('解析导航数据失败:', error);
					console.error('原始options.data:', options.data);
					this.initializeData(); // 使用默认数据初始化
				}
			} else {
				console.log('没有传递数据，使用默认数据初始化');
				this.initializeData(); // 使用默认数据初始化
			}
		},
		mounted() {
			// 移除mounted中的初始化，改为在onLoad中处理
		},
		methods: {
			/**
			 * 使用导航数据初始化页面
			 */
			initializeDataFromNavigation() {
				try {
					console.log('开始处理导航数据:', this.navigationData);

					// 保存完整的原始数据
					this.originalData = this.navigationData.originalData;
					console.log('保存的原始数据:', this.originalData);

					const processedData = processZuowenData(this.navigationData);
					console.log('处理后的数据:', processedData);

					// 检查生成的swiperData格式
					console.log('==== swiperData格式检查 ====');
					if (processedData.swiperData && processedData.swiperData.length > 0) {
						processedData.swiperData.forEach((pageData, index) => {
							console.log(`第${index + 1}页数据:`, pageData);
							if (pageData.list && pageData.list.length > 0) {
								pageData.list.forEach((listItem, listIndex) => {
									console.log(`  第${listIndex + 1}个列表项:`, listItem);
									if (listItem.chars && listItem.chars.length > 0) {
										listItem.chars.forEach((char, charIndex) => {
											console.log(`    字符${charIndex + 1}:`, {
												type: char.type,
												hasLocations: !!char.locations,
												locationsLength: char.locations ? char
													.locations.length : 0
											});
										});
									}
								});
							}
						});
					}

					// 更新页面数据
					this.swiperData = processedData.swiperData;
					this.studentInfo = {
						name: processedData.studentInfo.name || '未知学生',
						class: processedData.studentInfo.class || '未知班级',
						date: processedData.studentInfo.date || '未知日期'
					};
					this.correctionData = processedData.correctionData;

					// 从attachs中获取教师评语
					if (this.navigationData.correctionData && this.navigationData.correctionData.attachs) {
						try {
							const attachs = typeof this.navigationData.correctionData.attachs === 'string' ?
								JSON.parse(this.navigationData.correctionData.attachs) :
								this.navigationData.correctionData.attachs;
							this.teacherComment = attachs.pingYu || '';
							console.log('加载的教师评语:', this.teacherComment);
						} catch (error) {
							console.error('解析attachs失败:', error);
							this.teacherComment = '';
						}
					}

					// 更新错误详情列表
					this.updateErrorList();

				} catch (error) {
					console.error('使用导航数据初始化失败:', error);
					this.initializeFallbackData();
				}
			},

			/**
			 * 更新错误详情列表
			 */
			updateErrorList() {
				this.errorList = [];

				if (this.correctionData && this.correctionData.errorZis) {
					this.errorList = this.correctionData.errorZis.map(error => ({
						character: error.zi,
						description: error.reason || '无详细说明'
					}));
				}

				// 限制显示数量，避免列表过长
				if (this.errorList.length > 10) {
					this.errorList = this.errorList.slice(0, 10);
				}
			},

			/**
			 * 初始化数据，从批改结果中提取数据（保留原有逻辑作为备用）
			 */
			initializeData() {
				try {
					// 获取按canvas分组的错别字数据
					const canvasDataArray = filterErrorCharsByCanvas()
					console.log('筛选出的canvas数据:', canvasDataArray)

					// 获取图片URL列表
					const imageUrls = getImageUrls()
					console.log('图片URLs:', imageUrls)

					// 计算统计信息
					const statsArray = calculateCanvasStats(canvasDataArray)
					console.log('统计信息:', statsArray)

					// 构建swiperData
					this.swiperData = canvasDataArray.map((canvasData, index) => {
						return {
							imgurl: imageUrls[index] || '/static/2.jpg', // 使用真实图片URL或默认图片
							list: canvasData,
							stats: statsArray[index] || {
								correct: 0,
								incorrect: 0,
								missing: 0
							}
						}
					})

					console.log('最终swiperData:', this.swiperData)
				} catch (error) {
					console.error('初始化数据失败:', error)
					// 如果初始化失败，使用备用数据
					this.initializeFallbackData()
				}
			},

			/**
			 * 初始化备用数据（如果真实数据加载失败）
			 */
			initializeFallbackData() {
				this.swiperData = [{
					// 第一页数据
					imgurl: '/static/2.jpg',
					list: [{
						text: "作文第1页（备用数据）",
						chars: []
					}],
					stats: {
						correct: 0,
						incorrect: 0,
						missing: 0
					}
				}]
			},

			/**
			 * 轮播切换事件
			 */
			onSwiperChange(e) {
				this.currentSwiperIndex = e.detail.current
				console.log('切换到第', this.currentSwiperIndex + 1, '页')
			},

			/**
			 * 处理canvas组件的updateList事件
			 */
			handleUpdateList(cleanedList, swiperIndex) {
				console.log('更新第', swiperIndex + 1, '页的数据:', cleanedList)

				// 更新对应页面的list数据
				if (this.swiperData[swiperIndex]) {
					this.$set(this.swiperData[swiperIndex], 'list', cleanedList)

					// 重新计算统计信息
					let incorrectCount = 0
					let correctCount = 0
					let missingCount = 0

					cleanedList.forEach(item => {
						if (item.chars && Array.isArray(item.chars)) {
							item.chars.forEach(char => {
								if (char.type === 0) {
									incorrectCount++
								} else if (char.type === 1) {
									correctCount++
								} else if (char.type === -1) {
									missingCount++
								}
							})
						}
					})

					// 更新该页面的统计信息
					this.$set(this.swiperData[swiperIndex].stats, 'incorrect', incorrectCount)
					this.$set(this.swiperData[swiperIndex].stats, 'correct', correctCount)
					this.$set(this.swiperData[swiperIndex].stats, 'missing', missingCount)

					console.log(`第${swiperIndex + 1}页统计更新:`, {
						incorrect: incorrectCount,
						correct: correctCount,
						missing: missingCount
					});
				}
			},

			// 审阅按钮
			async goCorr() {
				try {
					console.log('开始提交审阅数据...');
					if (!this.originalData) {
						uni.showToast({
							title: '数据异常，无法提交',
							icon: 'error'
						});
						return;
					}

					// 重新构建修改后的aiCorrectResult
					const updatedAiCorrectResult = this.buildUpdatedAiCorrectResult();
					console.log('构建的新aiCorrectResult:', updatedAiCorrectResult);

					// 重新构建修改后的attachs
					const updatedAttachs = this.buildUpdatedAttachs();
					console.log('构建的新attachs:', updatedAttachs);

					// 准备提交的数据（保持原始格式）
					const submitData = {
						...this.originalData,
						// 更新修改后的字段（保持JSON字符串格式）
						aiCorrectResult: JSON.stringify(updatedAiCorrectResult),
						attachs: JSON.stringify(updatedAttachs),
						reviewStatus: 1 // 标记为已审阅
					};

					console.log('准备提交的完整数据:', submitData);

					// 调用审阅接口
					const response = await this.$api.resultReviewcCmposition(submitData);

					if (response.code == '0000') {
						uni.showToast({
							title: '审阅完成',
							icon: 'success'
						});

						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						throw new Error(response.message || '提交失败');
					}

				} catch (error) {
					console.error('提交审阅失败:', error);
					uni.showToast({
						title: '提交失败: ' + error.message,
						icon: 'error'
					});
				}
			},

			// 预览手写图片
			previewImage() {
				uni.previewImage({
					urls: ['/static/handwriting-practice.jpg'],
					current: 0
				});
			},

			// 抽屉触摸开始
			onDrawerTouchStart(e) {
				this.touchStartY = e.touches[0].clientY;
				this.initialDrawerHeight = this.drawerHeight;
			},

			// 抽屉触摸移动
			onDrawerTouchMove(e) {
				const currentY = e.touches[0].clientY;
				const deltaY = this.touchStartY - currentY;
				const newHeight = this.initialDrawerHeight + deltaY;

				// 限制抽屉高度范围
				if (newHeight >= this.minDrawerHeight && newHeight <= this.maxDrawerHeight) {
					this.drawerHeight = newHeight;
				}
			},

			// 抽屉触摸结束
			onDrawerTouchEnd(e) {
				// 根据最终高度决定是展开还是收起
				if (this.drawerHeight > (this.minDrawerHeight + this.maxDrawerHeight) / 2) {
					this.expandDrawer();
				} else {
					this.collapseDrawer();
				}
			},

			// 展开抽屉
			expandDrawer() {
				this.isDrawerExpanded = true;
				this.drawerHeight = this.maxDrawerHeight;
			},

			// 收起抽屉
			collapseDrawer() {
				this.isDrawerExpanded = false;
				this.drawerHeight = this.minDrawerHeight;
			},

			zhankaiSHouqi() {
				// 点击展开和收起
				if (!this.isDrawerExpanded) {
					this.expandDrawer()
				} else {
					this.collapseDrawer()
				}
			},


			/**
			 * 构建更新后的aiCorrectResult
			 */
			buildUpdatedAiCorrectResult() {
				try {
					// 解析原始的aiCorrectResult
					const originalResult = JSON.parse(this.originalData.aiCorrectResult);
					console.log('原始aiCorrectResult:', originalResult);

					// 从当前swiperData重新构建修改后的数据
					const updatedResult = {
						...originalResult
					};

					// 重新构建errorZis（错别字）数据
					const updatedErrorZis = [];
					this.swiperData.forEach(pageData => {
						if (pageData.list && pageData.list.length > 0) {
							pageData.list.forEach(listItem => {
								if (listItem.chars && listItem.chars.length > 0) {
									listItem.chars.forEach(char => {
										// 只处理type为0的错别字
										if (char.type === 0 && char.zi && char.locations) {
											updatedErrorZis.push({
												zi: char.zi,
												code: char.code || 'Z001',
												type: char.reason || '错别字',
												reason: char.reason || '需要修正的字符',
												correct: char.origin || '',
												ziIndex: char.ziIndex || 0,
												locations: char.locations
											});
										}
									});
								}
							});
						}
					});

					updatedResult.errorZis = updatedErrorZis;
					console.log('更新后的errorZis:', updatedErrorZis);

					return updatedResult;
				} catch (error) {
					console.error('构建aiCorrectResult失败:', error);
					// 如果解析失败，返回原始数据
					return JSON.parse(this.originalData.aiCorrectResult);
				}
			},

			/**
			 * 构建更新后的attachs
			 */
			buildUpdatedAttachs() {
				try {
					// 解析原始的attachs
					const originalAttachs = JSON.parse(this.originalData.attachs);
					console.log('原始attachs:', originalAttachs);

					// 重新计算统计信息
					let incorrectCount = 0;
					let correctCount = 0;
					let missingCount = 0;

					this.swiperData.forEach(pageData => {
						incorrectCount += pageData.stats.incorrect || 0;
						correctCount += pageData.stats.correct || 0;
						missingCount += pageData.stats.missing || 0;
					});

					// 更新attachs
					const updatedAttachs = {
						...originalAttachs,
						pingYu: this.teacherComment, // 更新教师评语
						statisticsInfo: {
							...originalAttachs.statisticsInfo,
							incorrect: incorrectCount,
							correct: correctCount,
							missing: missingCount
						}
					};

					console.log('更新后的attachs:', updatedAttachs);
					return updatedAttachs;
				} catch (error) {
					console.error('构建attachs失败:', error);
					// 如果解析失败，返回原始数据并更新评语
					const fallback = JSON.parse(this.originalData.attachs);
					fallback.pingYu = this.teacherComment;
					return fallback;
				}
			},

			// 切换tab
			switchTab(tab) {
				this.activeTab = tab;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		position: fixed;
		height: 180rpx;
		bottom: 0;
		left: 0;
		z-index: 9999;
		background-color: #fff;
		width: 100%;
		padding: 10rpx 30rpx 30rpx;

		.ban {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}

		.shen {
			width: 70%;
			height: 96rpx;
			background: #05C490;
			border-radius: 30rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.container {
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;
		overflow: hidden;
	}

	.main-content {
		height: 100%;
		transition: padding-bottom 0.3s ease;
	}

	.image-container {
		padding: 20rpx;
		position: relative;
	}

	.handwriting-image {
		width: 100%;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.arrow-indicator {
		position: absolute;
		background-color: rgba(255, 0, 0, 0.8);
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: pulse 2s infinite;
	}

	.arrow-1 {
		top: 50rpx;
		right: 50rpx;
	}

	.arrow-2 {
		top: -30rpx;
		right: 30rpx;
	}

	.arrow-text {
		font-size: 24rpx;
		color: white;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.1);
			opacity: 0.7;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.drawer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		border-radius: 40rpx 40rpx 0 0;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: height 0.3s ease;
		z-index: 1000;
	}

	.drawer-header {
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: grab;
	}

	.drag-indicator {
		width: 60rpx;
		height: 6rpx;
		background-color: #ddd;
		border-radius: 3rpx;
	}

	.drawer-content {
		// background-color: #f8fffe;
		border-radius: 0 0 20rpx 20rpx;
	}

	.content-wrapper {
		padding: 0 30rpx 120rpx;
	}

	.result-title {
		// text-align: left;
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.stats-section {
		margin-bottom: 30rpx;
		background: linear-gradient(90deg, #E8F5E8 0%, #F0FFF0 100%);
		padding: 20rpx;
		border-radius: 50rpx 50rpx 0 0;
	}

	.stat-item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		padding: 15rpx;
		// background-color: white;
		border-radius: 12rpx;
	}

	.stat-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
	}

	.correct-icon {
		background-color: #28a745;
	}

	.wrong-icon {
		background-color: #dc3545;
	}

	.missing-icon {
		background-color: #28a745;
	}

	.icon-text {
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}

	.stat-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.student-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.student-details {
		display: flex;
		align-items: center;
	}

	.student-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 15rpx;
	}

	.student-class {
		font-size: 24rpx;
		color: #8e44ad;
		background-color: #f8f9fa;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.date-info {
		font-size: 24rpx;
		color: #666;
	}

	.error-details,
	.suggestions {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.error-item {
		display: flex;
		align-items: center;
		padding: 15rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
	}

	.error-char {
		width: 60rpx;
		height: 60rpx;
		background-color: #ff4757;
		color: white;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 15rpx;
	}

	.error-desc {
		flex: 1;
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.suggestion-item {
		padding: 15rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
		border-left: 4rpx solid #28a745;
	}

	.suggestion-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.action-section {
		margin-top: 40rpx;
	}

	.review-btn {
		width: 100%;
		height: 80rpx;
		background-color: #28a745;
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.review-btn::after {
		border: none;
	}

	.drawer-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}

	.drawer-expanded {
		z-index: 1001;
	}

	.tab-container {
		margin-bottom: 30rpx;
	}

	.tab-bar {
		display: flex;
		border-bottom: 2rpx solid #ddd;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666;
		cursor: pointer;
		position: relative;
		transition: all 0.3s ease;
	}

	.tab-active {
		color: #28a745;
		font-weight: bold;
	}

	.tab-active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background-color: #28a745;
		border-radius: 2rpx;
	}

	.tab-content {
		/* v-show控制显示隐藏，无需设置display:none */
	}

	.teacher-comments {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
	}

	.comment-content {
		position: relative;
	}

	.comment-textarea {
		width: 100%;
		min-height: 600rpx;
		padding: 15rpx;
		border: 1rpx solid #28a745;
		border-radius: 8rpx;
		font-size: 26rpx;
		line-height: 1.4;
		background-color: #fafafa;
		box-sizing: border-box;
	}

	.comment-counter {
		position: absolute;
		bottom: 10rpx;
		right: 15rpx;
		font-size: 22rpx;
		color: #999;
	}
</style>